آموزش معرفی D3.js با React [ویدئو]

سرفصل ها و درس ها

معرفی Introduction

• معرفی دوره Introduction to the course

• معرفی دوره Introduction to the course

• چرا باید D3 را یاد بگیرید Why you should learn D3

• چرا باید D3 را یاد بگیرید Why you should learn D3

• ساختار این دوره چگونه است How this course is structured

• ساختار این دوره چگونه است How this course is structured

شروع کار با D3 Getting started with D3

شروع کار با D3 Getting started with D3

• معرفی Introduction

• معرفی Introduction

• راه اندازی محیط ما Setting up our environment

• راه اندازی محیط ما Setting up our environment

• خلاصه واکنش React recap

• خلاصه واکنش React recap

• ادغام React و D3 Integrating React and D3

• ادغام React و D3 Integrating React and D3

• ایجاد پوشش React ما Creating our React wrapper

• ایجاد پوشش React ما Creating our React wrapper

• معرفی SVG ها Introducing SVGs

• معرفی SVG ها Introducing SVGs

• افزودن SVG با D3 Adding SVGs with D3

• افزودن SVG با D3 Adding SVGs with D3

• انتخاب ها و داده ها می پیوندد Selections and data joins

• انتخاب ها و داده ها می پیوندد Selections and data joins

• کار با داده های خارجی Working with external data

• کار با داده های خارجی Working with external data

• خلاصه Summary

• خلاصه Summary

ساخت نمودار میله ای ایستا Building a static bar chart

ساخت نمودار میله ای ایستا Building a static bar chart

• معرفی Introduction

• معرفی Introduction

• راه اندازی پروژه ما Setting up our project

• راه اندازی پروژه ما Setting up our project

• نوشتن میله های ما با ترازو Writing our bars with scales

• نوشتن میله های ما با ترازو Writing our bars with scales

• تعمیر ارتفاع نوار ما Fixing our bar heights

• تعمیر ارتفاع نوار ما Fixing our bar heights

• ژنراتورهای محور D3 D3 axis generators

• ژنراتورهای محور D3 D3 axis generators

• قرارداد حاشیه D3 The D3 margin convention

• قرارداد حاشیه D3 The D3 margin convention

• ثابت کردن محور y ما Fixing our y-axis

• ثابت کردن محور y ما Fixing our y-axis

• اضافه کردن برچسب به نمودار ما Adding labels to our chart

• اضافه کردن برچسب به نمودار ما Adding labels to our chart

• خلاصه بخش Section summary

• خلاصه بخش Section summary

به روز رسانی نمودار میله ای ما Making our bar chart update

به روز رسانی نمودار میله ای ما Making our bar chart update

• معرفی Introduction

• معرفی Introduction

• حلقه زدن با فواصل Looping with intervals

• حلقه زدن با فواصل Looping with intervals

• اضافه کردن به روز رسانی به تجسم ما Adding updates to our visualization

• اضافه کردن به روز رسانی به تجسم ما Adding updates to our visualization

• الگوی به روز رسانی عمومی D3 The D3 general update pattern

• الگوی به روز رسانی عمومی D3 The D3 general update pattern

• اضافه کردن مجموعه دیگر ما از داده ها Adding our other set of data

• اضافه کردن مجموعه دیگر ما از داده ها Adding our other set of data

• تلنگر بین مجموعه داده ها Flicking between datasets

• تلنگر بین مجموعه داده ها Flicking between datasets

• افزودن ترانزیشن های D3 Adding D3 transitions

• افزودن ترانزیشن های D3 Adding D3 transitions

• افزودن کشویی ما با React Adding our dropdown with React

• افزودن کشویی ما با React Adding our dropdown with React

• ردیابی کشویی ما در App.js Tracking our dropdown in App.js

• ردیابی کشویی ما در App.js Tracking our dropdown in App.js

• اتصال React و D3 Connecting React and D3

• اتصال React و D3 Connecting React and D3

• خلاصه Summary

• خلاصه Summary

ایجاد یک اپلیکیشن کامل Creating a complete application

ایجاد یک اپلیکیشن کامل Creating a complete application

• معرفی Introduction

• معرفی Introduction

• راه اندازی پروژه ما Setting up our project

• راه اندازی پروژه ما Setting up our project

• در حال بارگیری در داده های ما Loading in our data

• در حال بارگیری در داده های ما Loading in our data

• شروع پراکندگی ما: اضافه کردن مقیاس Starting our scatterplot: adding scales

• شروع پراکندگی ما: اضافه کردن مقیاس Starting our scatterplot: adding scales

• افزودن حلقه های ما Adding our circles

• افزودن حلقه های ما Adding our circles

• افزودن محورها و برچسب ها Adding axes and labels

• افزودن محورها و برچسب ها Adding axes and labels

• بازگشت به React - اضافه کردن یک ردیف ورودی Back to React - adding an input row

• بازگشت به React - اضافه کردن یک ردیف ورودی Back to React - adding an input row

• ساخت ردیف برای جدول ما Building rows for our table

• ساخت ردیف برای جدول ما Building rows for our table

• حذف فیلدها از جدول ما Removing fields from our table

• حذف فیلدها از جدول ما Removing fields from our table

• افزودن فیلدها به جدول ما Adding fields to our table

• افزودن فیلدها به جدول ما Adding fields to our table

• اتصال React و D3 Connecting React and D3

• اتصال React و D3 Connecting React and D3

• افزودن قابلیت هایلایت Adding highlight functionality

• افزودن قابلیت هایلایت Adding highlight functionality

• ایده هایی برای بهبود Ideas for improving

• ایده هایی برای بهبود Ideas for improving

• خلاصه بخش Section summary

• خلاصه بخش Section summary

بسته شدن Wrapping up

بسته شدن Wrapping up

• افکار پایانی Concluding thoughts

• افکار پایانی Concluding thoughts